<template>
  <div ref="chartRef" style="width: 100%; height: 180px"/>
</template>

<script setup>
import {onMounted, watch} from "vue";
import {useEcharts} from "../../../../hook/ useEcharts";
import * as echarts from "echarts";

const {chartRef, initChart, updateChart} = useEcharts();
const props = defineProps({
  value: {
    type: Object,
    default: () => ({yData: [], data: []}),
  },
});

const option = {
  tooltip: {
    trigger: 'item',
    axisPointer: { // 坐标轴指示器，坐标轴触发有效
      type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
    }
  },
  legend: {
    data: ['系统数'],
    top: '4%',
    textStyle: {
      color: "#fff"
    },
    itemWidth: 15,
    itemHeight: 10,
  },
  grid: {
    left: '2%',
    right: '7%',
    bottom: '2%',
    top: '20%',
    containLabel: true
  },
  dataZoom: [
    {
      type: "slider",
      zoomLoxk: true,
      showDetail: false,
      yAxisIndex: 0, // 关联 Y 轴
      start: 0, // 初始显示范围的起始百分比
      end: 10, // 初始显示范围的结束百分比
      width: "5%", // 修改滑动条的高度，这里设置为父容器高度的 10%
    },
  ],
  xAxis: {
    type: 'value',
    splitLine: {
      lineStyle: {
        color: '#324C80'
      }
    },
    axisLabel: {
      show: true,
      textStyle: {
        color: '#fff'
      },
    },
  },
  yAxis: [{
    type: 'category',
    axisLabel: {
      show: true,
      textStyle: {
        color: '#fff'
      },
      formatter: function (value) {
        return value.length > 5 ? value.slice(0, 5) + '...' : value;
      }
    },
    axisTick: {
      show: false
    },
    axisLine: {
      lineStyle: {
        color: '#324C80'
      },
    },
    data: props.value.yData || [],
  },],
  series: [{
    name: '系统数',
    type: 'bar',
    barWidth: 9,
    itemStyle: {
      normal: {
        barBorderRadius: 9,
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
          offset: 0,
          color: '#1890FF1A'
        }, {
          offset: 1,
          color: '#1EE7E7'
        },]),
      },
    },
    data: props.value.data || [],
  },
  ]
};

watch(() => {
  return props.value
}, (newVal) => {
  updateChart({
    yAxis: [{
      data: newVal.yData,
    }],
    series: [{
      data: newVal.data
    }]
  })
}, {deep: true})

onMounted(() => {
  // 初始化图表
  initChart(option);
});

</script>

<style scoped lang="scss">

</style>
